<!--
 * @Author: luoyun
 * @Descripttion: 
-->
<template>
  <div class="tab-bar-item" :class="{ active: isActive }" @click="itemClick">
    <slot name="tabbar-icon">
      <i class="icon iconfont icon-shouye"></i>
    </slot>
    <slot name="tabbar-text">首页</slot>
  </div>
</template>

<script>
export default {
  name: "tab-bar-item",
  props: {
    path: {
      type: String,
      default: "/Home",
    },
  },
  data() {
    return {
      // isActive:false,
    };
  },

  components: {},
  computed: { 
    isActive() {//不放在data里，是因为是动态的，不能写死，需要监听计算动态的
      return this.$route.path === this.path
    },
  },

  methods: {
    itemClick() {
      this.$router.replace(this.path)
    },
  },

  created() {},
};
</script>

<style lang="scss">
.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  &.active {
    color: red;
  }
}
</style>
